import React, { useState, useEffect } from 'react';
import { Button, Table, Input, Space, Modal, Form, message, Upload } from 'antd';
import type { UploadChangeParam } from 'antd/es/upload';
import type { RcFile, UploadFile, UploadProps } from 'antd/es/upload/interface';
import type { TableColumnsType } from 'antd';
import { SearchOutlined, PlusOutlined, LoadingOutlined } from '@ant-design/icons';
import styles from './index.less';
// import RC from '@/assets/imgs/木材.png';
import { getGoods, addGoods, getRequire, agreeInRequire } from '@/api/services';


const ProcessInbound: React.FC = () => {
    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
    const [search, setSearch] = useState<string>('');
    const [searchValue, setSearchValue] = useState<string>('');
    const [page, setPage] = useState(1);
    const [total, setTotal] = useState(0);
    const [data, setData] = useState([])
    const [type, setType] = useState<any>('');

    const hasSelected = selectedRowKeys.length > 0;

    const getInRequireList = () => {
        getRequire({
            page: page,
            size: 5,
            requireName: type ? type : '入库'
        }).then((res: any) => {
            if (res.status == 200) {
                // console.log(res);
                setData(res.results);
                setTotal(res.length);
            }

        })
    }

    useEffect(() => {
        getInRequireList();
    }, [page, type, searchValue]);

    const handleSearchChange = (e: any) => {
        setSearch(e.target.value);
        if (!e.target.value) {
            setSearchValue(search);
        }
    };
    const onSearch = (e: any) => {
        setSearchValue(search);
    }

    const handleChange = (pagination: any, filters: any, sorter: any) => {
        // 更新 type 以根据用户选择的过滤条件进行筛选
        const newType = filters.require_kind ? filters.require_kind[0] : '';
        console.log(newType);
        setType(newType);
    };

    const agreeRequire = (id: any) => {
        agreeInRequire({
            requireId: id
        }).then((res: any) => {
            if (res.status == 200) {
                console.log(res);
                message.success(res.msg);
                getInRequireList();
            }

        })
    }

    const formatDetail = (data: any) => {
        var dataArray = data.split("||");
        var result = "";

        // 遍历数组中的每一对数据
        for (var i = 0; i < dataArray.length; i += 2) {
            // 获取物品名称和数量
            var item = dataArray[i]?.trim();
            var quantity = dataArray[i + 1]?.trim();

            // 格式化为键值对的形式，并添加到结果中
            result += item + "：" + quantity;

            // 如果不是最后一对数据，添加逗号分隔符
            if (i < dataArray.length - 2) {
                result += ", ";
            }
        }

        return result;
    }
    const columns = [
        {
            title: '请求明细',
            dataIndex: 'require_detail',
            render: (_: any, record: any) => (
                <div>
                    <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
                        {record.require_detail && formatDetail(record.require_detail).split(',').map((item: any, index: number) => (
                            <span key={index}>{item}</span>
                        ))}
                    </Space>
                </div>
            )
        },
        {
            title: '请求类型',
            dataIndex: 'require_kind',
            filters: [
                { text: '原料入库', value: '原料入库' },
                { text: '产品入库', value: '产品入库' },
            ],
            // filterMultiple: false,
        },
        {
            title: '请求状态',
            dataIndex: 'require_type',
        },
        {
            title: 'Action',
            dataIndex: '',
            key: 'x',
            render: (text: any, record: any) =>
                <Space size="middle">
                    <a onClick={() => agreeRequire(record.require_id)}>批准入库</a>
                </Space>
        },
    ];

    //分页器
    const paginationConfig = {
        total: total,
        onChange: (page: number, pageSize?: number) => {
            setPage(page);
        },
        showTotal: (total: number, range: [number, number]) => `共 ${total} 条数据`,
    }

    return (
        <div className={styles.orderContainer}>
            <div className={styles.header}>
            </div>
            <Table columns={columns} dataSource={data}
                onChange={handleChange}
                pagination={paginationConfig}
            />
        </div >
    );
};

export default ProcessInbound;